<template>
  <div>
      <h1>123</h1>
      <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="排名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bookName"
        label="书面"
        width="180">
        <template slot-scope="scope">
      <a :href="scope.row.bookLink" target="_blank" class="buttonText">{{scope.row.bookName}}</a>
      </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>
       <el-table-column
        prop="bookType"
        label="类型">
      </el-table-column> 
      <el-table-column
        prop="bookStatus"
        label="状态">
      </el-table-column>
       <el-table-column
        prop="lastUpdate"
        label="最后更新">
      </el-table-column>
       <el-table-column
        prop="updateTime"
        label="更新时间">
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  activated(){
    this.getDataList();
  },
  methods:{
    getDataList(){
       this.$http({
          url: this.$http.adornUrl('/book/query'),
          method: 'get',
          params: this.$http.adornParams({
             'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          this.tableData = data.list.list
          this.totalPage = data.list.totalCount
          this.dataListLoading = false
        })
    },
 // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
  }
}
</script>

<style>

</style>